{seo.title}

/* eslint-disable max-statements */ import type { ParsedUrlQuery } from 'querystring'; import type { GetStaticPaths, GetStaticProps } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; import { useIntl } from 'react-intl'; import { getLayout, Heading, LinksWidget, PostsList, Page, PageHeader, PageSidebar, PageBody, LoadingPage, TocWidget, Spinner, } from '../../components'; import { convertWPThematicPreviewToPageLink, fetchAllThematicsSlugs, fetchThematic, fetchThematicsCount, fetchThematicsList, } from '../../services/graphql'; import styles from '../../styles/pages/blog.module.scss'; import type { GraphQLConnection, NextPageWithLayout, WPThematic, WPThematicPreview, } from '../../types'; import { CONFIG } from '../../utils/config'; import { ROUTES } from '../../utils/constants'; import { getLinksItemData, getPostsWithUrl, getSchemaJson, getSinglePageSchema, getWebPageSchema, slugify, } from '../../utils/helpers'; import { loadTranslation, type Messages } from '../../utils/helpers/server'; import { useBreadcrumb, useHeadingsTree, useThematic, useThematicsList, } from '../../utils/hooks'; export type ThematicPageProps = { data: { currentThematic: WPThematic; otherThematics: GraphQLConnection; totalThematics: number; }; translation: Messages; }; const ThematicPage: NextPageWithLayout = ({ data }) => { const intl = useIntl(); const { isFallback } = useRouter(); const { isLoading, thematic } = useThematic( data.currentThematic.slug, data.currentThematic ); const { isLoading: areThematicsLoading, thematics } = useThematicsList({ fallback: data.otherThematics, input: { first: data.totalThematics, where: { notIn: [thematic.id] } }, }); const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({ title: data.currentThematic.title, url: `${ROUTES.THEMATICS}/${data.currentThematic.slug}`, }); const { ref, tree } = useHeadingsTree({ fromLevel: 2 }); if (isFallback || isLoading) return ; const { content, intro, meta, slug, title } = thematic; const { articles, dates, seo, relatedTopics } = meta; const webpageSchema = getWebPageSchema({ description: seo.description, locale: CONFIG.locales.defaultLocale, slug, title: seo.title, updateDate: dates.update, }); const articleSchema = getSinglePageSchema({ dates, description: intro, id: 'thematic', kind: 'page', locale: CONFIG.locales.defaultLocale, slug, title, }); const schemaJsonLd = getSchemaJson([webpageSchema, articleSchema]); const messages = { widgets: { loadingThematicsList: intl.formatMessage({ defaultMessage: 'Thematics are loading...', description: 'ThematicPage: loading thematics message', id: 'rVoW4G', }), thematicsListTitle: intl.formatMessage({ defaultMessage: 'Other thematics', description: 'ThematicPage: other thematics list widget title', id: 'KVSWGP', }), tocTitle: intl.formatMessage({ defaultMessage: 'Table of Contents', description: 'PageLayout: table of contents title', id: 'eys2uX', }), topicsListTitle: intl.formatMessage({ defaultMessage: 'Related topics', description: 'ThematicPage: related topics list widget title', id: '/42Z0z', }), }, browsePostsTitle: intl.formatMessage( { defaultMessage: 'Browse posts in {thematicName} thematic', description: 'ThematicPage: posts list heading', id: 'jrRBeb', }, { thematicName: title } ), }; const pageUrl = `${CONFIG.url}${slug}`; const browsePostHeadingId = slugify(messages.browsePostsTitle); return ( {seo.title} {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */} {/*eslint-disable-next-line react/jsx-no-literals -- Content allowed */}